<template>
  <div class="goodsDetails">
    <div v-if="loading">
      <Loading />
    </div>
    <div v-if="!loading">
      <!-- 详情广告bananer -->
      <goods-banner></goods-banner>

      <!-- 轮播图及视频播放 -->
      <div class="top_banners" id="promotion_details" ref="promotion_details">
        <swiper-images :mediaS="mediaS" :loading="loading" v-if="mediaS.length > 0"></swiper-images>
        <!-- 分享图标 -->
        <div class="icon_more">
          <div class="icon_share" @click="Share = true">
            <img src="../../assets//images//goodsDetails/ico_share.png" alt />
          </div>
        </div>
      </div>
      <!--商品价钱展示区  -->
      <div class="good_pice_warp">
        <div class="pice_cont">
          <h2 class="good_pice">
            <div class="good_prices">
              <span class="pic_symbol">￥</span>
              <span class="pic_count" v-if="this.details == ''">
                {{ good.now_price }}
                <i
                  v-if="good.specs_type ==2 && good.specs.length !=1 && !showQi"
                >/起</i>
              </span>
              <span class="pic_count" v-if="this.details != ''">
                {{details.spec_price}}
                <i v-if="good.specs_type==2&&this.details == ''">/起</i>
              </span>
              <small class="small_font" v-if="this.details == ''&&good.now_price!=good.price">
                <span>￥</span>
                {{ good.price }}
                <i
                  v-if="good.specs_type==2&&good.specs.length!=1"
                >/起</i>
              </small>
              <small
                class="small_font"
                v-if="this.details != '' &&details.spec_price!=details.spec_origin_price "
              >
                <span>￥</span>
                {{ details.spec_origin_price }}
                <i
                  v-if="good.specs_type==2 &&this.details == ''"
                >/起</i>
              </small>
            </div>
            <p class="count">
              销量&nbsp;
              <span>{{ good.sale }}</span>
            </p>
          </h2>
        </div>
        <ul class="good_tip">
          <!-- <li class="tip" v-if="good.delivery_type === 1">手动发货</li>
                          <li class="tip" v-if="good.delivery_type === 2">自动发货</li>
          <li class="tip" v-if="good.delivery_type === 3">不需要发货</li>-->
          <li
            class="tip"
            v-if="good.trade_type_id == 3"
          >{{ Number(good.rent_option.deposit) ? '押金' + Number(good.rent_option.deposit) + '元' : '免押金'}}</li>
          <li
            class="tip"
            v-if="good.trade_type_id  == 3 && good.rent_option.least_time != 0"
          >{{ Number(good.rent_option.least_time) }}小时起租</li>
        </ul>
        <h1 class="good_title">{{ good.goods_name }}</h1>
        <div class="good_pic" v-if="good.open_promotion==1">
          <div class="pic_cont">
            <div>
              <span class="icon"></span>
              <!-- v-if="good.share.profit_sum" -->
              <span class="pic_text">
                已累计发放推广费用
                <em>{{ good.share.profit_sum }}元</em>
              </span>
            </div>
          </div>
          <div class="right" @click="getMillion">
            <p>
              查看详情
              <img src="../../assets/images/pubilc/detail.png" alt />
            </p>
          </div>
        </div>
      </div>
      <!-- 优惠 -->
      <div class="preferen" @click="prefer = true">
        <p>优惠</p>
        <div class="content">
          <!-- <div class="content_text" v-if="Number(good.discount) != 10">
                    <span>折扣</span>
                    <p class="content_text_info">商品已享受{{ good.discount }}折优惠</p>
          </div>-->
          <div class="content_text" v-if="this.cut != ''">
            <span v-if="this.cut != ''">购满减</span>
            <p class="content_text_info">{{ cutText }}</p>
          </div>
          <div class="content_text" v-if="this.sent != ''">
            <span v-if="this.sent != ''">购满送</span>
            <p class="content_text_info">{{ sentText }}</p>
          </div>
          <div class="content_text" v-if="this.arr != ''">
            <span v-if="this.arr != ''">购满折</span>
            <p class="content_text_info">{{ arrText }}</p>
          </div>
          <div class="content_text">
            <span>密马币</span>
            <p>
              <i>购买赠送密马币</i>
            </p>
          </div>
        </div>
        <img src="../../assets/images/goodsDetails/right_return_black_icon@2x.png" alt />
      </div>

      <!-- 商品的可选参数版块 -->
      <div style="background:#fff">
        <!-- 已选  -->
        <div class="selected" @click="view(1);views()">
          <div class="sele_left">{{ this.details=='' ? '规格' : '已选'}}</div>
          <div class="sele_right">
            <p class="sele_text">
              <span class="cancel" v-if="this.details!=''">
                <img src="../../assets/images/goodsDetails/ico_set.png" alt />
              </span>
              <span class="cancel" v-if="this.details==''">
                <img src="../../assets/images/pubilc/sure_gray_icon.png" alt />
              </span>
              <span class="info" v-if="this.details==''">请选择规格</span>
              <span class="info" v-if="this.details!=''">{{ details.spec_name }}</span>
            </p>
            <p class="sele_text tag" v-if="good.delivery_type === 2">
              支持
              <span class="sendout">
                <span class="yellow" v-if="good.delivery_type === 1">手动发货</span>
                <span class="yellow" v-if="good.delivery_type === 2">自动发货</span>
                <span class="yellow" v-if="good.delivery_type === 3">不需要发货</span>
              </span>
              <span class="time">24H</span>
              <span class="serve">服务，预计60秒内发货</span>
            </p>
          </div>
          <div class="dot">
            <img src="../../assets/images/goodsDetails/right_return_black_icon@2x.png" alt />
          </div>
        </div>
      </div>
      <!-- 参数 -->
      <div style="background:#fff">
        <!-- v-if="good.attributes.length"  -->
        <div class="parameter" @click="paramete = true">
          <!-- 弹框？ -->
          <div class="param_left">参数</div>
          <div class="param_right">
            <span>{{ atiText }}</span>
          </div>
          <div class="dot">
            <img src="../../assets/images/goodsDetails/right_return_black_icon@2x.png" alt />
          </div>
        </div>
      </div>

      <!-- 商品保险 -->
      <div class="insurance" @click="service = true">
        <ul class="insurances">
          <!-- 这里需要根据返回不同的字段显示不同的icon类 -->
          <li class="insur" v-for="item of good.services" :key="item.service_id">
            <span v-if="item.support ==1" :class="item.support==1 ? 'insu_icon' : 'insu_icon_off'"></span>
            <span>{{ item.service_name }}</span>
          </li>
        </ul>
        <div class="dot">
          <img src="../../assets/images/pubilc/three.png" alt />
        </div>
      </div>
      <!-- 用户评价  -->

      <div
        class="user_estimate"
        @click="prompt = true"
        :class="{user_active:good.comments.total == 0}"
      >
        <div class="user_tab">
          <h2 class="tab_title">
            <p class="tab_count">
              <span class="tab_ti">评价</span>

              <span class="count">({{ good.comments.total}})</span>
            </p>
            <!-- v-if="good.praise_rate" -->
            <p class="tab_percentage">
              <span v-if="good.comments.total != 0">好评率</span>
              <span>{{ good.praise_rate }}</span>
              <span v-if="good.comments.total != 0" class="second">%</span>
              <span class="left_arrow"></span>
            </p>
          </h2>

          <!-- 评价图标   后面 再根据接口数据进行 调 -->
          <div class="tab_switch" v-if="JSON.stringify(good.comment_tags) != '[]'">
            <span
              class="tab"
              v-for="(item, index) in good.comment_tags"
              :key="index"
            >{{ item.tag }}({{ item.comments_count }})</span>
          </div>
        </div>
        <!-- 用户的评论列表 -->
        <ul class="user_list">
          <div v-for="item in good.comments.data" :key="item.comment_id" class="user_li">
            <li class="user_item">
              <section class="user_photo">
                <div class="user_warpper">
                  <div class="photo">
                    <img class="head_phpoto" :src="item.head_img_url" />
                    <div class="text">
                      <span class="head_name">{{ item.nickname }}</span>
                      <!-- 评价星星 -->
                      <!-- <van-rate v-model="value" size="10px" /> -->
                      <div class="time">{{ item.create_time }}</div>
                    </div>
                  </div>
                  <!-- <div class="stars">
                                    <span class="star"></span>
                                    <span class="star"></span>
                                    <span class="star"></span>
                                    <span class="star"></span>
                                    <span class="star"></span>
                  </div>-->
                </div>
                <div class="bg" style>
                  <div class="grayStar" :style="{width: 0.37777 * 5 + 'rem' }">
                    <img
                      v-for="(item, index) in 5"
                      :key="index"
                      src="../../assets//images//goodsDetails//air_icon.png"
                      alt
                    />
                  </div>
                  <div :style="{width: 0.37777 * item.star + 'rem' }" class="aa">
                    <div class="lightStar">
                      <img
                        class="ccc"
                        v-for="(item, index) in 5"
                        :key="index"
                        src="../../assets/images/goodsDetails/stars.png"
                        alt
                      />
                    </div>
                  </div>
                </div>
              </section>
              <section class="user_text">{{ item.content }}</section>
            </li>
          </div>
        </ul>
      </div>
      <!-- 暂无评论 -->
      <div class="not" v-if="good.comments.total == 0">
        <p>该商品暂无评论</p>
        <span class="buy">去购买</span>
        <span class="langu">快成为第一个评论的人吧~</span>
      </div>
      <!--店铺 卖家推荐 -->

      <div class="seller_intr" id="goods_details_intro">
        <section class="seller_intr_top">
          <div class="business" @click="prompt = true">
            <!-- 商家头像 -->
            <div class="good_heads">
              <img :src="good.user.head_img_url" />
            </div>

            <div class="good_info">
              <h3>
                {{ good.user.nickname }}
                <!-- <span v-if="good.user.auth_identity == 2">已实名</span> -->
                <img
                  v-if="good.user.auth_identity == 2"
                  src="../../assets/images/goodsDetails/ico_yrz@2x.png"
                  alt
                />
              </h3>
              <div class="good_info_s">
                <div class="synthesis">
                  <span>综合评分</span>
                  <div class="bg">
                    <div class="grayStar" :style="{ width: 5 * 0.3777 + 'rem' }">
                      <img
                        v-for="(item, index) in 5"
                        :key="index"
                        src="../../assets//images//goodsDetails//air_icon.png"
                        alt
                      />
                    </div>
                    <div class="aa" :style="{ width: good.user.credit_score * 0.3777 + 'rem' }">
                      <div class="lightStar">
                        <img
                          class="ccc"
                          v-for="(item, index) in 5"
                          :key="index"
                          src="../../assets/images/goodsDetails/stars.png"
                          alt
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            :class="isfocus==0 ? 'button' : 'buttons'"
            @click="focus"
          >{{ isfocus==0 ? "关注" : "已关注" }}</div>
        </section>
        <!-- <section class="seller_intr_bottom">
                        <ul class="good_show">
                            <li
                                class="good_item"
                                v-for="(item, index) in good.seller_recommend"
                                :key="index"
                            >
                                <img :src="item.cover" />
                                <p class="show_text">
                                    {{ item.goods_name }}
                                </p>
                                <p class="show_pic">
                                    <span class="show_icon">¥{{ item.price }}</span>
                                </p>
                            </li>
                        </ul>
        </section>-->
      </div>

      <!-- </div> -->
      <!-- <section>
          <div
            :class="isfocus==0 ? 'button' : 'buttons'"
            @click="focus"
          >{{ isfocus==0 ? "关注" : "已关注" }}</div>
      </section>-->
      <!-- <section class="seller_intr_bottom">
				<ul class="good_show">
					<li
						class="good_item"
						v-for="(item, index) in good.seller_recommend"
						:key="index"
					>
						<img :src="item.cover" />
						<p class="show_text">
							{{ item.goods_name }}
						</p>
						<p class="show_pic">
							<span class="show_icon">¥{{ item.price }}</span>
						</p>
					</li>
				</ul>
      </section>-->
      <!-- </div> -->

      <!-- 详情 -->
      <div class="details">
        <p>
          <!-- <img src="../../assets/images/goodsDetails/详情@3x@2x.png" />
          <span>图文详情</span>-->
        </p>
      </div>

      <h3 class="good_detail_title">
        <span>商品详情</span>
      </h3>
      <!-- 商品详情 -->
      <!-- 图片 无数据  先写死   -->
      <div class="good_details" v-for="(item, index) in good.desc_description" :key="index">
        <div class="details_conent">
          <h3 class="details_title">{{ item.sys_desc.desc_title }}</h3>
          <p class="details_text">{{ item.desc_content }}</p>
          <div>
            <img v-for="(it, ind) in item.desc_media" :key="ind" :src="it.url" preview="ind" />
          </div>
        </div>
      </div>
      <div class="good_details">
        <!-- <h3>关于价格</h3> -->
        <div class="details_conent">
          <p class="details_text">{{ good.goods_desc }}</p>
          <div>
            <img
              v-for="(it, ind) in good.goods_detail_media"
              :key="ind"
              :src="it.url"
              preview="ind"
            />
          </div>
        </div>
      </div>
      <!-- 关于价格 -->
      <div class="explain" :class="{active:fold}">
        <div class="explain_info">
          <h3>关于价格</h3>
          <p>
            划线价格：商品展示的划线价可能是正品零售价或商品曾经展示过的销售价等，该价格仅供您参考。
            <br />未划线价格：指商品的销售价，是您最终决定购买商品的价格。
            <br />价格异常：因可能存在系统缓存、页面更新延迟等不确定性情况，导致价格显示异常，商品具体售价请以订单结算页价格为准。
          </p>
        </div>
        <!-- <div class="explain_info">
        <h3>关于发货</h3>
        <p>
          自动发货商品：订单付款成功后，平台自动发货（卖家已将卡密存储在平台智能库存管理系统中），无异常情况60秒内到货。
          <br />手动发货商品：订单付款成功后，由卖家安排发货。
        </p>
      </div>
      <div class="explain_info">
        <h3>关于确认收货</h3>
        <p>
          普通虚拟商品：因虚拟商品特殊性，买家收到卡密后，有24小时观察期，观察期无法收货，观察期结束后可手动收货或72小时后自动收货。
          <br />租号商品：租号时间结束后，由卖家检查账号资产，确认无误则退回买家押金并收货，或24小时自动退回押金并收货。
          <br />陪玩商品：陪玩结束后，由买家确认收货或24小时自动收货。
        </p>
        </div>-->
        <!--查看全部  -->
      </div>
      <div class="unfold" @click="unfold" :class="{unfolds:folds}">
        查看全部
        <img src="../../assets/images/pubilc/下拉@2x.png" alt />
      </div>
      <!-- 推荐 更多 -->
      <div class="recommend" @click="prompt = true">
        <img src="../../assets/images/goodsDetails/img_go.png" alt class="recommend_goods" />
      </div>
      <div class="shopping"></div>
      <!-- 底部购买 -->
      <div class="bottom_btns">
        <div class="bottom_btns_wrap">
          <div class="attention_store">
            <a @click="prompt = true">
              <img class="us" src="../../assets/images/goodsDetails/联系TA@.png" alt />
              <p>联系TA</p>
            </a>
            <a @click="collection">
              <img
                :src="
								iscollection == 1
									? require('../../assets/images/goodsDetails/未收藏.png')
									: require('../../assets/images/goodsDetails/收藏@2x.png')
							"
                alt
              />
              <p>{{ iscollection == 1 ? "已收藏" : "收藏" }}</p>
            </a>
          </div>
          <div class="buy_that" v-if="good.trade_type_id==3" @click="prompt = true">立即租用</div>
          <van-button class="buy_this" color="#ffdd07" @click="buy(2)" v-else>立即购买</van-button>
        </div>
      </div>

      <!-- 弹出层 -->
      <!-- 立即购买弹出框 -->
      <div class="proup groups">
        <van-popup v-model="show" position="bottom" style="margin:0px;" round>
          <keep-alive>
            <goods-specification
              :goods="good"
              :showQi="showQi"
              :query="query"
              @getprice="getprice"
              @closespeci="toSpeci"
              @change_num="change_num"
              :mark="mark"
            ></goods-specification>
          </keep-alive>
        </van-popup>
      </div>
      <!-- 商品优惠弹出框 -->
      <div class="proup groups">
        <van-popup v-model="prefer" position="bottom" round>
          <goods-preferential @completeprefer="completePrefer" :prefers="prefers" :good="good"></goods-preferential>
        </van-popup>
      </div>
      <!-- 商品参数 -->
      <div class="proup groups">
        <van-popup v-model="paramete" position="bottom" round>
          <goods-parameter @parameters="parameters" :attributes="attributes" v-if="paramete"></goods-parameter>
        </van-popup>
      </div>
      <!-- 商品服务 -->
      <div class="proup groups">
        <van-popup v-model="service" position="bottom" round>
          <goods-service @complete="complete" :services="goode"></goods-service>
        </van-popup>
      </div>
      <!-- 提示下载app -->

      <div class="clone">
        <van-popup v-model="prompt" position="bottom">
          <goods-download @closeprompt="toPrompt"></goods-download>
        </van-popup>
      </div>
      <div class="clone">
        <van-popup v-model="showmillion" position="bottom">
          <MillionPlan :share="shareData" @sharegoods="sharegoods" />
        </van-popup>
      </div>
      <!-- 分享弹出层 -->
      <van-popup v-model="Share" position="bottom">
        <goods-share @cancel="cancel" @needlogin="needlogin"></goods-share>
      </van-popup>

      <!-- 显示注册登录 -->
      <div class="loginin">
        <van-popup v-model="showLogin" :close-on-click-overlay="false">
          <login
            v-if="showLogin"
            @getSmsCode="getSmsCode"
            @userlogin="userLogin"
            @closelogin="toLogin"
          ></login>
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getGoodsDetails,
  getSms,
  userLogin,
  isFocusUser,
  collectGood,
  isLogin,
  confirmOrder,
} from "../../api/index";
import GoodsBanner from "../../components/goodsDetails/goodsBanner";
import swiperImages from "../../components/goodsDetails/swiperImages"; //轮播图及视频
import GoodsSpecification from "../../components/goodsBounced/goodsSpecification"; //商品规格
import GoodsPreferential from "../../components/goodsBounced/goodsPreferential"; //商品优惠
import GoodsParameter from "../../components/goodsBounced/goodsParameter"; //商品参数
import GoodsService from "../../components/goodsBounced/goodsService"; //商品服务
import GoodsDownload from "../../components/goodsBounced/goodsDownload"; //提示下载app
import GoodsShare from "../../components/goodsBounced/goodsShare"; //提示下载app
import MillionPlan from "../../components/goodsBounced/millionPlan"; //提示下载app
import Login from "../../components/login/login"; //注册登录页面
import Loading from "@/components/loading/loading";
import { Toast } from "vant";

export default {
  components: {
    GoodsBanner,
    swiperImages,
    GoodsSpecification,
    GoodsPreferential,
    GoodsParameter,
    GoodsService,
    GoodsDownload,
    GoodsShare,
    Login,
    collectGood,
    MillionPlan,
    Loading,
  },
  data() {
    return {
      loading: true,
      ToastLoading: {},
      loading: true,
      fold: true,
      folds: false,
      cut: [],
      sent: [],
      arr: [],
      mediaS: [], //轮播图数据
      attributes: [], //商品参数
      attribute: [],
      prefers: [],
      isfocus: 0,
      value: 1.2,
      iscollection: 0,
      show: false,
      prefer: false, //优惠
      paramete: false, //参数
      service: false, //服务
      goode: [], //商品服务保障
      prompt: false, //下载app
      Share: false, //分享
      shareData: {},
      showLogin: false, //注册登录
      good: {
        share: {},
        comments: {},
        user: {},
        rent_option: {},
      }, //商品信息

      user_id: "",
      action: 1, //收藏
      actions: 0, //关注
      query: {},
      details: "", //选好的商品参数
      sentText: "",
      cutText: "",
      arrText: "",
      atiText: "", //参数
      serviceName: "",
      jump: false,
      mark: "", //规格的参数
      showmillion: false,
      showQi: true,
      num: 0,
    };
  },
  computed: {
    stars() {
      return Number(this.good.user.credit_score) * (58 / 5) + "px";
    },
    starss() {
      return Number(this.good.comments.star) * (60 / 5) + "px";
      // return '60px';
    },
  },
  // beforeRouteLeave(to, from, next) {
  //   to.meta.keepAlive = true;
  //   next();
  // },
  beforeRouteEnter(to, from, next) {
    if (
      from.name === "confirmorder" ||
      from.name === "scanToPay" ||
      from.name === "orderDetails"
    ) {
      to.meta.keepAlive = false;
    }
    next();
  },

  mounted() {
    // this.overscroll(document.querySelector(".content")); // 让class为content的部分有默认滚动事件
    // document.body.addEventListener("touchmove", this.hiddentPrevent, {
    //   passive: false
    // });
  },
  destroyed() {
    // 销毁时移除监听
    // document.body.removeEventListener("touchstart", this.hiddentPrevent, {
    //   passive: false
    // });
    // document.body.removeEventListener("touchmove", this.hiddentPrevent, {
    //   passive: false
    // });
  },
  created() {
    this.ToastLoading = Toast.loading({
      message: "加载中...",
      forbidClick: true,
    });
    this.query = this.$route.query;
    this.getDetails();
  },
  methods: {
    change_num(val) {
      this.num = val;
    },
    goBack() {
      this.$router.push("/demo");
    },
    needlogin(i) {
      if (i) {
        this.showLogin = true;
      }
    },
    sharegoods(i) {
      if (i) {
        this.showmillion = false;
        setTimeout(() => {
          this.Share = true;
        }, 400);
      } else {
        this.showmillion = false;
      }
    },
    getMillion() {
      this.showmillion = true;
    },
    overscroll(el) {
      // el.addEventListener("touchstart", function() {
      //   let top = el.scrollTop;
      //   let totalScroll = el.scrollHeight;
      //   let currentScroll = top + el.offsetHeight;
      //   if (top === 0) {
      //     el.scrollTop = 1;
      //   } else if (currentScroll === totalScroll) {
      //     el.scrollTop = top - 1;
      //   }
      // });
      // el.addEventListener("touchmove", function(evt) {
      //   if (el.offsetHeight < el.scrollHeight) evt._isScroller = true;
      // });
    },
    // 监听事件方法
    hiddenPrevent() {
      if (!evt._isScroller) {
        evt.preventDefault();
      }
    },
    //立即购买
    buy(marks) {
      this.mark = marks;

      if (this.good.is_my) {
        Toast("您无法购买自己的商品");
      }
      Toast.loading({ message: "加载中" });
      isLogin()
        .then((res) => {
          Toast.clear();
          if (this.good.specs_type === 1) {
            let num;

            let obj = this.good.specs[0];
            this.num === 0
              ? obj.min_sale_num == 0
                ? (num = 1)
                : (num = obj.min_sale_num)
              : (num = this.num);
            let query = {
              goods_id: this.good.goods_id,
              quantity: num,
            };
            // console.log(this.$route.query);
            this.$route.query.promotion_user_id
              ? (query.promotion_user_id = this.$route.query.promotion_user_id)
              : null;
            this.$route.query.sign
              ? (query.sign = this.$route.query.sign)
              : null;
            query.rent_plan = 0;
            // debugger
            confirmOrder(query).then((iten) => {
              if (iten) {
                this.$router.push({
                  name: "confirmorder",
                  query: query,
                });
              }
            });
            // this.$router.push({
            //   path: '/confirmOrder',

            // })
          } else {
            this.show = true;
          }
        })
        .catch((err) => {
          Toast.clear();
          this.showLogin = true;
        });
    },
    view(mark) {
      this.mark = mark;
      if (this.good.trade_type_id != 3) {
        this.show = true;
      }
    },
    views() {
      if (this.good.trade_type_id == 3) {
        this.prompt = true;
      }
    },
    //展开价格
    unfold() {
      this.fold = !this.fold;
      this.folds = true;
    },
    getprice(val) {
      if (!val) {
        this.details = "";
      } else {
        this.details = val;
        // console.log(this.details);
      }
    },
    getDetails() {
      let _this = this;
      let items = {};
      // items.goods_id = 545;
      items.goods_id = this.query.goodsId;
      items.promotion_user_id = this.query.promotion_user_id || null;
      items.promotion_sign = this.query.sign || null;
      getGoodsDetails(items)
        .then((res) => {
          if (!res) return;
          window.document.title = res.data.goods_name;
          // this.loading = false
          this.ToastLoading.clear();
          this.loading = false;
          const {
            discounts,
            share,
            specs,
            goods_media,
            app_download,
          } = res.data;
          this.good = JSON.parse(JSON.stringify(res.data));
          if (this.good.trade_type_id === 1) {
            this.$router.replace("/personal_page");
          }
          this.user_id = res.data.user.user_id;
          this.mediaS = goods_media;
          let list = [];
          // console.log(specs)
          if (specs) {
            specs.forEach((item) => {
              list.push(
                Number(item.spec_price),
                Number(item.spec_origin_price)
              );
            });
            list = list.sort();
            list[0] === list[list.length - 1]
              ? (this.showQi = false)
              : (this.showQi = true);
          }
          this.appDownload = app_download;
          this.iscollection = res.data.collect_goods;
          this.isfocus = res.data.collect_seller;
          this.shareData = share;
          this.$store.commit("set_app_infos", this.appDownload);
          this.goode = res.data.services;
          this.attributes = res.data.attributes; //商品参数
          this.prefers = this.prefers.concat(
            res.data.discounts.cut,
            res.data.discounts.discount,
            res.data.discounts.sent
          ); //
          this.prefers.forEach((i) => {
            if (i.discount_type == 1) {
              this.cut.push(i);
            } else if (i.discount_type == 2) {
              this.sent.push(i);
            } else {
              this.arr.push(i);
            }
          });
          let a = "";
          this.sent.forEach((item) => {
            this.sentText =
              a +
              "满" +
              item.condition_num +
              (item.condition_type == 1 ? "元" : "件") +
              "送" +
              item.discount_value +
              "件， ";
          });

          this.sentText = this.sentText.substr(0, this.sentText.length - 1);
          this.sentText = this.sentText.substr(0, this.sentText.length - 1);
          let b = "";
          this.cut.forEach((it) => {
            this.cutText =
              b +
              "满" +
              it.condition_num +
              (it.condition_type == 1 ? "元" : "件") +
              "减" +
              it.discount_value +
              "元， ";
          });
          this.cutText = this.cutText.substr(0, this.cutText.length - 1);
          this.cutText = this.cutText.substr(0, this.cutText.length - 1);
          let c = "";
          this.arr.forEach((i) => {
            this.arrText =
              c +
              "满" +
              i.condition_num +
              (i.condition_type == 1 ? "元" : "件") +
              "打" +
              i.discount_value +
              "折， ";
          });
          this.arrText = this.arrText.substr(0, this.arrText.length - 1);
          this.arrText = this.arrText.substr(0, this.arrText.length - 1);
          let arry = [];
          for (var i of this.attributes) {
            for (let j in i.data) {
              // console.log(typeof i.data[j]);
              arry.push(i.data[j]);
            }
          }
          let str = "";
          arry.forEach((arr) => {
            str = str + arr + "，";
          });
          this.atiText = str.substr(0, str.length - 1);

          this.good.services.forEach((item) => {
            if (item.service_name == "免责声明") {
              item.service_name = item.service_name;
            } else if (item.service_name == "不支持7天无理由") {
              item.service_name = "";
            }
            return;
          });
          // console.log(this.serviceName)
        })
        .catch((err) => {
          if (
            err.code === 50000 ||
            err.code === 50107 ||
            err.code === 50108 ||
            err.code === 50109 ||
            err.code === 50113
          ) {
            _this.tokenIsBad();
          } else {
            this.$store.commit("set_app_infos", err.data.app_download);
            this.$router.replace("/goods_error");
          }
        });
    },
    tokenIsBad() {
      this.getDetails();
    },
    // login 组件回调获取手机号
    getSmsCode(tel) {
      getSms({ phone: Number(tel), event: "login" }).then((res) => {
        if (!res) return;
      });
    },
    // login 组件回调  用户手机号登录
    userLogin(params) {
      userLogin(params).then((res) => {
        this.$cookies.set("Token", res.data.authorization, -1);
        this.showLogin = false;
        Toast.success("登录成功");
        this.getDetails();
      });
    },
    // 是否关注商家
    focus() {
      Toast.loading({ message: "加载中" });
      this.actions = this.isfocus == 0 ? 1 : 0;
      let data = {};
      data.user_id = this.user_id;
      data.action = this.actions;
      isFocusUser(data)
        .then((res) => {
          Toast.clear();
          this.isfocus = this.actions == 1 ? 1 : 0;
        })
        .catch((err) => {
          Toast.clear();
          if (
            err.code === 50000 ||
            err.code === 50107 ||
            err.code === 50108 ||
            err.code === 50109 ||
            err.code === 50113
          ) {
            this.showLogin = true;
          }
        });
    },
    //商品是否收藏
    collection() {
      Toast.loading({ message: "加载中" });
      this.action = this.iscollection == 0 ? 1 : 2;
      let collect = {};
      collect.goods_id = this.query.goodsId;
      collect.action = this.action;
      collectGood(collect)
        .then((res) => {
          Toast.clear();
          // if (!res) return;
          this.iscollection = this.action === 1 ? 1 : 0;
        })
        .catch((err) => {
          Toast.clear();
          if (
            err.code === 50000 ||
            err.code === 50107 ||
            err.code === 50108 ||
            err.code === 50109 ||
            err.code === 50113
          ) {
            this.showLogin = true;
          }
        });
    },
    toLogin(showLogin) {
      this.showLogin = showLogin;
    },
    toSpeci(speci) {
      this.show = speci;
    },
    //关闭优惠弹框
    completePrefer(prefer) {
      this.prefer = prefer;
    },
    // 关闭商品参数弹框
    parameters(paramete) {
      this.paramete = paramete;
    },
    //关闭服务保障弹框
    complete(service) {
      this.service = service;
    },
    // 关闭提示下载app弹框
    toPrompt(prompt) {
      this.prompt = prompt;
    },
    //关闭分享弹框
    cancel(share) {
      this.Share = share;
    },
  },
};
</script>
<style lang="scss">
.loginin {
  .van-popup {
    border-radius: 9px;
    top: 43%;
  }
}

.proup {
  van-popup {
    height: 576px !important;
  }
}

.groups {
  .van-popup--round {
    // height: 576px !important;
    height: 526px !important;
    // height: 70% !important;
  }
}

.clone {
  .van-popup {
    background: unset; //没有继承属性 显示默认的
  }
}

.bottom_btns {
  .van-button {
    background: #fec90c;
    color: #1f1f1f;
    position: relative;
    bottom: 17px;
  }

  .van-sku-row__item--active::before {
    background: #fec90c;
    opacity: 1;
  }

  .van-sku-row__item--active {
    color: #2f2f2f;
    background: #f5f5f5;
  }
}
</style>
<style lang="scss" scoped>
@import "../../assets/scss/goodsDetails.scss";

.shopping {
  height: 92px;
}
</style>
